import { h } from 'snabbdom/src/package/h';
import { add, sort } from './list';

const tabs = [
  {
    name: 'Rank',
    active: true
  },
  {
    name: 'Title',
    active: false
  },
  {
    name: 'Description',
    active: false
  },
];

const tab = (title, active = false, i) => {
  return h('a.btn', {
    class: { active: active },
    on: {
      click: () => {
        tabs.forEach((item, index) => {
          if (index === i) {
            item.active = true;
          } else {
            item.active = false;
          }
        });
        sort(title);
      }
    }
  }, title);
}

const addNode = h('a.btn', {
  style: {
    position: 'absolute',
    right: 0
  },
  on: {
    click: () => {
      add();
    }
  }
}, 'Add');

const sortNode = () => {
  return h('div', {
    style: {
      width: '100%',
      position: 'relative'
    }
  }, [
    'Sort by: ',
    ...tabs.map((item, index) => tab(item.name, item.active, index)),
    addNode
  ]);
};

export default sortNode;